<template>
  <div class="article-list">
    <div class="table-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="名称">
              <a-input v-model="queryParam.keyword" placeholder="输入内容" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => (this.queryParam = {})">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
    </div>

    <a-table ref="table" :columns="columns" @change="handleTableChange" :scroll="{ y: 600 }" :pagination="pagination" :loading="loading" :data-source="dataList" :rowKey="(text, record,index) => record">
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDel(record)">删除</a>
        </template>
      </span>
    </a-table>
    <!-- 添加编辑 -->
    
  </div>
</template>

<script lang="ts">
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import "mavon-editor/dist/highlightjs/styles/vs2015.min.css";
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import config from "../../../utils/config";

@Component({
  head() {
    return {
      title: "导航管理",
      titleTemplate: "%s - by 刘洋博客",
    };
  },
})
export default class extends Vue {
  form: Object = { cMdContent: "", cHtmlContent: "" };
  value: string = "";
  $axios: any;
  $message: any;
  loading: boolean = false;
  dataList: Array<any> = [];
  columns: Array<any> = [
    {
      title: "名称",
      dataIndex: "ntitle",
      key: "ntitle",
    },
    {
      title: "简介",
      dataIndex: "ndetail",
      key: "ndetail",
    },
    {
      title: "类型",
      dataIndex: "typeid",
      customRender: (text: any, record: any) => record.nav_type_model?.typename,
      key: "typeid",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "操作",
      key: "action",
      width: "160px",
      scopedSlots: { customRender: "action" },
    },
  ];
  pagination: any = {
    page: <number>1,
    pageSize: <number>10,
    total: <number>0,
  };
  $router: any;
  queryParam: any = { page: 1, keyword: "" };

  created() {
    this.queryParam.page = 1;
    this.loadData();
  }
  handleAdd() {
    console.log("新增");
  }

  async handleDel(row: { cid: any }) {
    const res = await this.$axios.$post(
      config.BASE_URL + "/api/article/delById",
      {
        cid: row.cid,
      }
    );
    if (res.c == 1) {
      this.$message.success(res.m);
      this.loadData();
    } else {
      this.$message.error(res.m);
    }
  }

  async handleSearch() {
    this.queryParam.page = 1;
    this.loadData();
  }
  handleTableChange(pagination: { current: any }, filters: any, sorter: any) {
    this.queryParam = {
      page: pagination.current,
    };
    this.loadData();
  }
  async loadData() {
    // const queryParam = Object.assign({}, this.queryParam);
    const res = await this.$axios.$get(config.BASE_URL + "/api/nav/adminlist", {
      params: this.queryParam,
    });
    // const res = await this.$axios.$get(
    //   config.BASE_URL + "/api/nav/adminlist?page=" + this.pagination.current,{page:this.pagination.current}
    // );
    if (res.c == 1) {
      this.dataList = res.d.rows;
      const pagination = { ...this.pagination, total: res.d.count };
      this.loading = false;
      this.pagination = pagination;
    } else {
      this.$message.error(res.m);
    }
  }
  handleEdit(row: { cid: string }) {
    this.$router.push("/admin/add?id=" + row.cid);
  }
}
</script>

<style scoped>
/* .div-main{margin-top: 80px;} */
</style>
